<template>
  <div>
    <Appheader :parentToChild="ymname" ref="loginStatus" @refresh="refresh"></Appheader>
    <div v-html="long_img" class="longimg"></div>
    <div class="tushuList" v-loading="loading">
      <div class="tushuList_classify flex">
        <!-- <img src="../../assets/pindaoye/coachBook.png" class="book_img" alt /> -->
        <div class="book_title">艺考图书</div>
        <!-- <div
          class="classify_item"
          v-for="(list_f,list_index) in zhuanyef"
          :key="list_index"
          @click="listf(list_f.id)"
          :class="choose_id==list_f.id?'classify_active':''"
        >{{list_f.name}}</div>-->
      </div>
      <ul class="c_bottom">
        <li v-for="(list,index) in listarry" :key="index">
          <img :src="list.photo" alt @click="toDetail(list.id)" />
          <div
            class="hidden b_bottom_a"
            style="width:204px;margin-top:13px;margin-bottom:3px;"
            @click="toDetail(list.id)"
          >{{list.title}}</div>
          <!-- <div class="b_bottom_b flex" @click="toDetail(list.id)">
            <div>¥{{list.price}}元</div>
            <div>定价{{list.dingjia}}元</div>
          </div> -->
          <div
            class="c_bottom_d flex"
            style="margin-top:3px;margin-bottom:9px;"
            @click="toDetail(list.id)"
          >
            <!-- <el-rate
              v-model="list.star"
              disabled
              :colors="['#fc7023', '#fc7023', '#fc7023']"
              disabled-void-color="#999"
            ></el-rate> -->
            <div class="price">¥{{list.price}}元</div>
            <div>{{list.buyNum}}人购买</div>
          </div>
          <div class="b_bottom_c flex" style="width:204px;" @click="addcar(list.id)">
            <!-- <img src="../../assets/car_red.png" alt /> -->
            加入购物车
          </div>
        </li>
      </ul>
      <div class="page" v-if="total!=0">
        <div class="page_a" @click="handleCurrentChange(0)">首页</div>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total="total"
          :page-size="9"
        ></el-pagination>
        <div class="page_a" @click="handleCurrentChange(1)">尾页</div>
      </div>
      <div v-else class="tip2">
        <img src="../../assets/none.png" alt />
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "../pindaoye/headers";
import swiper from "../pindaoye/swiper";
import Appfooter from "../footer";
import {
  Professionallist,
  ykGoodslist,
  addcar,
  channelTime
} from "../../api/index";
export default {
  props: {},
  data() {
    return {
      ymname: "艺考图书",
      zhuanyef: [],
      choose_id: "",
      loading: true,
      currentPage: 1,
      total: 0, //列表总数
      pagenum: 1, //请求的页数
      pagesize: 9, //请求的数量
      listarry: [],
      SwiperList: [],
      type: "",
      long_img:''
    };
  },
  computed: {},
  created() {
    sessionStorage.setItem("nowPage", "yikaotushuPd");
    this.choose_id = this.$route.params.pId;
    if (
      this.choose_id == "" ||
      this.choose_id == null ||
      this.choose_id == undefined
    ) {
      this.choose_id = localStorage.getItem("profationId");
      this.type = localStorage.getItem("type");
    }
  },
  mounted() {
    Professionallist()
      .then(res => {
        if (res.data.code == 0) {
          this.zhuanyef = res.data.rows;
        }
      })
      .catch(e => {});
    let msg = {
      title: "艺考选课"
    };
    channelTime(this.qs(msg))
      .then(res => {
        // console.log(res)
        this.long_img = res.data.ykPc.content;
      })
      .catch(e => {});

    this.post();
  },
  watch: {},
  methods: {
    refresh(res) {
      // console.log("触发");
      this.type = res.type;
      this.choose_id = res.id;
      localStorage.setItem("profationId", this.choose_id);
      localStorage.setItem("type", this.type);
      this.post();
    },
    post() {
      let msg = {
        type: "3",
        pId: this.choose_id,
        pageNum: this.pagenum,
        pageSize: this.pagesize
      };
      ykGoodslist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.rows.length; i++) {
              res.data.rows[i].star = res.data.rows[i].star - 0;
            }
            this.listarry = res.data.rows;
            this.total = res.data.total;
            // console.log(this.listarry);
          }
          this.loading = false;
        })
        .catch(e => {});
    },
    //切换选项
    listf(id) {
      this.choose_id = id;
      this.pagenum = 1;
      this.currentPage = 1;
      this.post();
    },
    handleCurrentChange(val) {
      if (val == "w") {
        this.pagenum = Math.ceil(this.total / this.pagesize);
      } else {
        this.pagenum = val;
      }
      this.currentPage = this.pagenum;
      this.loading = true;
      this.post();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //详情
    toDetail(id) {
      this.$router.push({
        name: "tushuDetail",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    addcar(id) {
      if (localStorage.getItem("YKuserid")) {
        let msg = {
          userId: localStorage.getItem("YKuserid"),
          goodsId: id,
          booknum: 1
        };
        addcar(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.info = res.data.ykGoods;
              this.$refs.loginStatus.userDetail();
            }
          })
          .catch(e => {});
      } else {
        this.$refs.loginStatus.login();
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        return;
      }
    }
  },
  components: { Appheader, Appfooter, swiper }
};
</script>

<style scoped>
.tushuList {
  width: 1200px;
  margin: 0 auto;
  background: #363640;
  margin-top: 39px;
}
.longimg {
  width: 100%;
  height: 350px;
}
/* tushuList_classify */
.tushuList_classify {
  width: 100%;
  padding:30px 33px;
}
.classify_item {
  width: 25%;
  text-align: center;
  height: 60px;
  line-height: 60px;
  /* background: #171717; */
  font-size: 22px;
  color: #333;
  /* border-right: 1px solid #fff; */
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid #333;
  border-right: none;
}
.classify_item:last-child {
  border-right: 1px solid #333 !important;
}
.classify_active {
  background: rgba(216, 20, 23, 1);
  color: #fff;
}
.classify_item:hover {
  background: rgba(216, 20, 23, 1);
  color: #fff !important;
}
/* ul */
.c_bottom {
  display: flex;
  flex-wrap: wrap;
  padding-left: 51px;
  padding-right: 51px;
}
.c_bottom li {
  width: 344px;
  padding-bottom: 20px;
  padding-top: 12px;
  margin-bottom: 28px;
  box-sizing: border-box;
  margin-right: 33px;
  cursor: pointer;
}
.c_bottom li:nth-child(3n) {
  margin-right: 0px !important;
}
.c_bottom li > img {
  width: 260px;
  height: 260px;
  margin: 0 auto;
  border-radius: 20px;
}
.c_bottom li:hover {
  /* border: 1px solid #c8a94f; */
}
.c_bottom_d {
  justify-content: center;
  align-content: center;
}
.c_bottom_d >>> .el-rate__icon {
  margin-right: 0;
  font-size: 14px;
}
.c_bottom_d >>> .el-rate {
  height: 14px;
  line-height: 0px;
}
.c_bottom_d div {
  color: #999;
  font-size: 14px;
  
}
.c_bottom_d .price{
  color: #c8a94f;
  font-size: 18px;
  margin-right: 4px;
}
.b_bottom_a {
  width: 268px;
  margin: 0 auto;
  font-size: 16px;
  color: #333;
  margin-top: 5px;
  margin-bottom: 4px;
  text-align: center;
}
.b_bottom_b {
  justify-content: center;
}
.b_bottom_b > div {
  font-size: 14px;
}
.b_bottom_b > div:first-child {
  color: #c8a94f;
  margin-right: 5px;
}
.b_bottom_b > div:last-child {
  color: #999;
  text-decoration: line-through;
}
.b_bottom_c {
  width: 268px;
  height: 36px;
  border: 1px solid #444750;
  margin: 0 auto;
  justify-content: center;
  margin-top: 7px;
  color: #7b7c91;
  font-size: 14px;
  border-radius: 36px;
}
.b_bottom_c > img {
  width: 14px;
  height: 12px;
  margin-right: 4px;
}
/* page */
.page {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 49px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.page >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c8a94f !important;
}
.page >>> .el-pager li,
.page >>> .btn-next,
.page >>> .btn-prev {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 34px;
  text-align: center;
  border-radius: 5px;
}
.page_a {
  width: 34px;
  height: 34px;
  background: rgba(243, 243, 243, 1);
  border-radius: 5px;
  font-size: 12px;
  color: #333;
  line-height: 34px;
  text-align: center;
}
.page_a:hover {
  background: #c8a94f;
  color: #fff;
}

/* 新样式 */
.book_img {
  margin-right: 10px;
  height: 22px;
  width: 20px;
}
.book_title {
  font-size: 24px;
  font-family: Microsoft YaHei;
  color: #c8a94f;
}
</style>
